<!-- Dom页面 -->
<template>
  <div id="Main">
      
      <!-- 聊天主框体 -->
      <div class="LtDiv">
        <!-- 登录人信息 -->
      <span class="nowLoginP">当前登录人：{{userData.realName }} - {{ userData.nickName }} 
        - 连接状态：<span v-if="islink" style="color:green;font-weight:900">●已连接</span>
        <span v-else style="color:red;font-weight:900">●未连接</span>
      </span>
        <!-- 用户信息 -->
        <div class="userDiv">
            <!-- 用户头像 -->
            <div class="userPt">
                <el-avatar shape="square" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                
            </div>
            <!-- 信息列表按钮 -->
            <div class="listBtn" title="信息">
                <!-- 未点击 -->
                <svg @click="changeBtnState('msg')" t="1681528016318" v-if="btnState.msg1" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15193" width="200" height="200"><path d="M512 917.333333a308.458667 308.458667 0 0 1-86.058667-9.152c-59.349333-17.301333-177.642667-4.373333-272.576 14.485334 0 0-8.192 1.344-8.704 1.344a42.282667 42.282667 0 0 1-41.408-52.522667c20.245333-91.733333 28.053333-200.746667 12.330667-274.581333A405.333333 405.333333 0 1 1 512 917.333333z m-172.992-277.333333h213.333333a32 32 0 1 0 0-64h-213.333333a32 32 0 0 0 0 64z m341.333333-234.666667h-341.333333a32 32 0 0 0 0 64h341.333333a32 32 0 1 0 0-64z" fill="#A09C9D" p-id="15194"></path></svg>
                <!-- 已点击 -->
                <svg t="1681527714590" v-if="btnState.msg2" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4919" width="200" height="200"><path d="M512 917.333333a308.458667 308.458667 0 0 1-86.058667-9.152c-59.349333-17.301333-177.642667-4.373333-272.576 14.485334 0 0-8.192 1.344-8.704 1.344a42.282667 42.282667 0 0 1-41.408-52.522667c20.245333-91.733333 28.053333-200.746667 12.330667-274.581333A405.333333 405.333333 0 1 1 512 917.333333z m-172.992-277.333333h213.333333a32 32 0 1 0 0-64h-213.333333a32 32 0 0 0 0 64z m341.333333-234.666667h-341.333333a32 32 0 0 0 0 64h341.333333a32 32 0 1 0 0-64z" fill="#48B484" p-id="4920"></path></svg>
            </div>
            <!-- 好友列表按钮 -->
            <!-- <div class="fBtn" title="好友">
                
                <svg @click="changeBtnState('list')" t="1681527927692" v-if="btnState.list1" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10213" width="200" height="200"><path d="M518.966571 653.825634l0-6.70855c89.791366-64.161263 89.447337-175.282379 89.275323-265.589787l0-13.589115c0-130.730724-78.782463-208.653116-210.717285-208.653116l-6.70855 0c-126.602385 0-196.2681 74.138082-196.2681 208.653116 0 67.945574 0 205.728876 103.552495 279.178901l0 5.332437c-120.065849 17.029397-232.735092 66.225433-232.735092 144.663867 0 109.056946 107.680833 162.037292 329.062993 162.037292 283.30724 0 342.824122-88.071225 342.824122-162.037292C737.252478 713.170502 598.437091 669.13489 518.966571 653.825634z" fill="#A09C9D" p-id="10214"></path><path d="M929.564253 767.698975c-17.545439 0-31.82261-14.277171-31.994625-31.82261-0.344028-23.393919-101.660339-88.415253-197.300185-99.768184-16.169326-1.892155-28.210314-15.653284-28.210314-31.82261l0-66.225433c0-9.804804 4.472367-18.921552 12.040988-24.942046 54.012431-43.175542 94.951789-137.26726 94.951789-218.801949 0-109.917017-74.310096-132.966907-136.579204-132.966907-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625c123.678145 0 200.568453 75.514195 200.568453 197.128171 0 94.779775-44.207626 200.396439-106.992777 258.365194l0 24.598018c91.855535 19.609609 225.682513 83.942886 225.682513 158.59701 0 17.545439-14.277171 31.650596-31.82261 31.82261C929.736267 767.698975 929.736267 767.698975 929.564253 767.698975z" fill="#A09C9D" p-id="10215"></path></svg>
                
                <svg t="1681527927692" v-if="btnState.list2" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10213" width="200" height="200"><path d="M518.966571 653.825634l0-6.70855c89.791366-64.161263 89.447337-175.282379 89.275323-265.589787l0-13.589115c0-130.730724-78.782463-208.653116-210.717285-208.653116l-6.70855 0c-126.602385 0-196.2681 74.138082-196.2681 208.653116 0 67.945574 0 205.728876 103.552495 279.178901l0 5.332437c-120.065849 17.029397-232.735092 66.225433-232.735092 144.663867 0 109.056946 107.680833 162.037292 329.062993 162.037292 283.30724 0 342.824122-88.071225 342.824122-162.037292C737.252478 713.170502 598.437091 669.13489 518.966571 653.825634z" fill="#48B484" p-id="10214"></path><path d="M929.564253 767.698975c-17.545439 0-31.82261-14.277171-31.994625-31.82261-0.344028-23.393919-101.660339-88.415253-197.300185-99.768184-16.169326-1.892155-28.210314-15.653284-28.210314-31.82261l0-66.225433c0-9.804804 4.472367-18.921552 12.040988-24.942046 54.012431-43.175542 94.951789-137.26726 94.951789-218.801949 0-109.917017-74.310096-132.966907-136.579204-132.966907-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625c123.678145 0 200.568453 75.514195 200.568453 197.128171 0 94.779775-44.207626 200.396439-106.992777 258.365194l0 24.598018c91.855535 19.609609 225.682513 83.942886 225.682513 158.59701 0 17.545439-14.277171 31.650596-31.82261 31.82261C929.736267 767.698975 929.736267 767.698975 929.564253 767.698975z" fill="#48B484" p-id="10215"></path></svg>
            </div> -->
            <!-- 设置功能按钮 -->
            <div @click="addFDialog=true" class="addF" title="添加好友">
                <i class="el-icon-circle-plus-outline"></i>
            </div>

            <!-- 设置功能按钮 -->
            <div @click="outLogin" class="option" title="设置（退出）">
                <i class="el-icon-switch-button"></i>
            </div>
        </div>
        <!-- 好友列表 -->
        <div class="listDiv" >
            <!-- 好友信息窗口 -->
            <div class="fDiv" @click="changeUser(item)"  v-for="(item,index) in fList" :key="timekey+index">
                <!-- 好友头像 -->
                <div class="fpt" @click="clickFDiv">
                    <el-badge :value="item.notSaveCount" :hidden="item.notSaveCount<=0" class="item">
                        <el-avatar  class="ftpDiv" shape="square" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    </el-badge>
                </div>
                <!-- 好友信息内容 -->
                <div class="fContent">
                    <span class="fName">{{ item.fedRealName }}</span>
                    <!-- <span class="fTime">{{ item.fedNickName }}</span>
                    <br/> -->
                    <!-- <span class="fmdesc">你打算的骄傲四等奖爱神的箭阿斯...</span> -->
                </div>
            </div>
            
        </div>
        <!-- 聊天窗体 -->
        <div class="chartDiv">
            <!-- 好友信息 -->
            <div class="fTtile">
                <span class="fTitle_span">{{ saveRealName==null?'(请选择好友进行消息发送)':saveRealName }}</span>
            </div>
            <!-- 消息窗体 -->
            <div class="msgDiv"  ref="scrollable">
                
                <el-row v-for="(item,index) in hisMsg" :key="index">
                    <!-- 别人发送的信息 -->
                    <div class="otherSendDiv" v-if="item.isMy==false">
                        <div class="omsg">
                            <el-avatar  class="ftpDiv" shape="square" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        </div>
                        <span>{{ item.sendNickName }}</span>
                        <div class="omsgContent">{{ item.msg }}</div>
                    </div>

                    <!-- 自己发送给别人的消息 -->
                    <div class="mySendDiv" v-else>
                        
                        <div class="omsg" style="float:right;margin-left:20px">
                            <el-avatar  class="ftpDiv" shape="square" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        </div>
                        <span style="float:right;">{{ item.sendNickName }}</span>
                        <div class="myomsgContent" style="float:right;">{{ item.msg }}</div>
                    </div>
                </el-row>
                

            </div>
            <!-- 发送消息窗体 -->
            <div class="sendDiv">
                <!-- 消息工具条 -->
                <div class="sendTools">
                    <el-popover
                        v-model="emojiShowState"
                        placement="bottom-start"
                        width="300"
                        trigger="click">
                        <span class="emojiSpan" @click="addEmoji(item)" :title="item.name" v-for="(item,index) in emojiList" :key="index">{{ item.char }}</span>
                        <i class="el-icon-help sion" slot="reference" title="表情"></i>
                    </el-popover>
                    <i class="el-icon-picture sion" title="发送文件"></i>
                </div>
                <!-- 发送信息的内容框体 -->
                <div class="sendTextDiv">
                    <el-input class="testmsg"
                    type="textarea"
                    :rows="8"
                    placeholder="请输入消息内容..."
                    v-model="sendMsg" @keydown.enter="doSendMsg">
                    </el-input>
                </div>
                <!-- 发送消息的按钮 -->
                <div class="sendBtnDiv">
                     <el-button type="primary" :disabled="saveRealName==null" @click="doSendMsg" >{{ saveRealName==null?'无法发送':'发送' }}</el-button>
                </div>
            </div>
        </div>
      </div>

        <!-- 添加好友弹窗 -->
        <el-dialog
        title="添加好友"
        :visible.sync="addFDialog"
        width="40%"
        :before-close="addFDialogHandleClose"
        :close-on-click-modal="false"
        >
            <el-row>
                <el-col :span="20">
                    <el-input
                        placeholder="请输入朋友微信号或者昵称（用户名）进行搜索..."
                        prefix-icon="el-icon-search"
                        v-model="addFData.nickName">
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button style="margin-left:10px" type="primary" @click="searchF" >搜索</el-button>
                </el-col>
            </el-row>
            <el-table
                :data="searchFList"
                stripe
                style="width: 100%">
                <el-table-column
                prop="code"
                label="微信号">
                </el-table-column>
                <el-table-column
                prop="nickName"
                label="昵称（用户名）">
                </el-table-column>
                <el-table-column
                label="操作">
                <!-- 插槽 -->
                <template slot-scope="scope">
                    <el-button v-if="checkIsHaveFrends(scope.row.userID)" type="success" size="small">已添加</el-button>
                    <el-button v-else @click="rowAdd(scope.row)" type="text" size="small">添加</el-button>
                </template>
                </el-table-column>
            </el-table>
            
        </el-dialog>

  </div>
</template>

<!-- 组件js -->
<script>
import * as API from '@/api/user.js';
const appData = require("@/assets/emoji.json");;
export default {
  name: "Main",
  data() {
    return {
        // 随时更新的唯一key
        timekey:new Date().getTime()+Math.random(),
        // 添加好友弹窗
        addFDialog:false,
        // 按钮组显示情况
        btnState:{
            msg1:false,
            msg2:true,
            list1:true,
            list2:false
        },
        // 添加好友表单内容
        addFData:{
            nickName:null // 同时存放微信号或者昵称（用户名）
        },
        // 要发送的消息
        sendMsg:"",
        // 要发送信息的接收人
        saveUserID:null,
        // 要接收人的真实姓名
        saveRealName:null,
        // 搜索出来的好友数据
        searchFList:[],
        // 用户信息加载
        userData:{
            realName:null,
            nickName:null
        },
        // 表情包数据
        emojiList:[],
        // 表情包列表弹窗状态
        emojiShowState:false,
        // 好友列表
        fList:[],
        // websocket对象
        nowWebSocket:null,
        lockReconnect: false,
        islink:false,
        hisMsg:[], //历史聊天信息
        saveMusic:new Audio('../static/save1.wav'), // 接收音效
        sendMusic:new Audio('../static/send.wav') //发送音效
    };
  },
  mounted(){
    // 初始化加载用户信息
    this.userData = JSON.parse(window.localStorage.getItem("user"));

    // 查询当前用户的好友列表信息
    this.getUserFList();

    // webScoket初始化
    this.initWebSocket();

    this.$nextTick(() => {
      const scrollable = this.$refs.scrollable;
      scrollable.scrollTop = scrollable.scrollHeight;
    });

    // 表情包渲染
    this.emojiList = appData;

    //添加一个监听键盘操作的监听器
    window.addEventListener('keydown', this.keydownSendMsg);

  },
  destroyed(){
    this.nowWebSocket.close();
  },
  methods:{
    // 按下键盘回车发送消息
    keydownSendMsg(param){
        if(param.keyCode == 13){// 13 代表敲击回车
            this.doSendMsg();
        }
    },
    // 初始化WebScoket
    initWebSocket(){
        this.nowWebSocket = new WebSocket("ws://localhost:9010/wxserver/"+this.userData.userID);
        // // console.dir("----连接中");

        this.nowWebSocket.onopen = this.webSocketOnOpen;
        this.nowWebSocket.onerror = this.webSocketOnError
        this.nowWebSocket.onmessage = this.webSocketOnMessage
        this.nowWebSocket.onclose = this.webSocketClose
    },// console
    webSocketOnOpen() {
      // // console.log('WebSocket连接成功')
      this.islink = true;
    },
    webSocketOnMessage(e) {
      //接收数据
      // // console.log('WebSocket 接受数据')
        console.log(e)

      // 播放接收音效
      this.saveMusic.play();
      
      var arr = e.data.split("@");

      var newHisMsgData = {
        sendUserID:arr[0],
        sendNickName:arr[1],
        saveUserID:arr[2],
        saveNickName:arr[3],
        msg:arr[4],
        saveAndSendTime:new Date(),
        isMy:false
      };

      // 如果没有选中好友信息则不在屏幕中显示
      if(this.saveRealName==null){// 没有选择

            for(var i in this.fList){
                if(this.fList[i].fedUserID == newHisMsgData.sendUserID){
                    this.fList[i].notSaveCount++;
                }
            }

      }else{
        this.hisMsg.push(newHisMsgData);
      this.timekey = new Date().getTime()+Math.random();

        this.$nextTick(() => {
                const scrollable = this.$refs.scrollable;
                scrollable.scrollTop = scrollable.scrollHeight;
        });
      }
      

    },
    webSocketClose(e) {
      // // console.log('断开连接', e)
      this.lockReconnect = false
      this.islink = false;
      this.reconnect();
    },
    webSocketOnError(e) {
      // // console.log('报错信息', e)
    },
    webSocketSend(Data) {

      var msgDatas = this.userData.userID+"@"+this.userData.realName+"@"+this.saveUserID+"@"+this.saveRealName+"@"+Data;
      
      // 发送人@接收人@接收人名字@信息
      // 保存到数据库的数据中表情包数据要替换为codes编码
      var newMsg =  this.changeEmojiToCode(msgDatas);

      API.addMsg(newMsg);

      //发送数据发送
      this.nowWebSocket.send(msgDatas);
        
        // 将当前的信息添加到历史记录中
        var arr = msgDatas.split("@");

        var newHisMsgData = {
        sendUserID:arr[0],
        sendNickName:arr[1],
        saveUserID:arr[2],
        saveNickName:arr[3],
        msg:arr[4],
        saveAndSendTime:new Date(),
        isMy:true
      };

      this.hisMsg.push(newHisMsgData);
      this.timekey = new Date().getTime()+Math.random();

        this.$nextTick(() => {
                const scrollable = this.$refs.scrollable;
                scrollable.scrollTop = scrollable.scrollHeight;
            });

        this.sendMsg = null;

        // 播放接收音效
      //this.sendMusic.play();
    },
    // 断开重连操作
    reconnect() {
      if (this.lockReconnect) return
      this.lockReconnect = true
      let _this = this
      //没连接上会一直重连，设置延迟避免请求过多
      setTimeout(function () {
        _this.initWebSocket();
        _this.lockReconnect = false
        // _this.isOne = 1;
      }, 2000)
    },
    // 循环替换表情包数据: code ---》 char
    changeEmojiToChar(str){
        
        for(var i in this.emojiList){
            if(str.includes("&"+this.emojiList[i].codes+";")){// 出现
                str = str.replace("&"+this.emojiList[i].codes+";",this.emojiList[i].char);
            }
        }
        return str;
    },
    // 循环替换表情包数据: char ---》 code
    changeEmojiToCode(str){
        for(var i in this.emojiList){
            if(str.includes(this.emojiList[i].char)!=-1){
                str = str.replace(this.emojiList[i].char,"&"+this.emojiList[i].codes+";");
            }
        }
        return str;
    },
    // 点击表情包添加数据到信息末尾
    addEmoji(data){

        // 文字信息 + &codes;

        this.sendMsg = this.sendMsg + data.char;

        this.emojiShowState = false;
    },
    // 点击好友列表发生切换
    changeUser(data){
        this.saveUserID = data.fedUserID;
        this.saveRealName = data.fedRealName;

        let _this = this;
        this.hisMsg = [];
        // 查询历史记录信息
        API.getMsgList({sendUserID:this.userData.userID,saveUserID:this.saveUserID})
        .then(function(res){
            if(res.code == 200){
                for(let i in res.data){
                    
                    res.data[i].msg = _this.changeEmojiToChar(res.data[i].msg);

                    if(res.data[i].sendUserID==_this.userData.userID){ // 我发给别人的消息（右侧）
                        res.data[i].isMy = true;
                    }else{ // 别人发给我的
                        res.data[i].isMy = false;
                    }
                }
            }

            _this.hisMsg = res.data;
            _this.timekey = new Date().getTime()+Math.random();

            _this.$nextTick(() => {
                const scrollable = _this.$refs.scrollable;
                scrollable.scrollTop = scrollable.scrollHeight;
            });

            // 去除未读信息
            for(var c in _this.fList){
                if(_this.fList[c].fedUserID == _this.saveUserID){
                    _this.fList[c].notSaveCount = 0;
                }
            }

        })
    },
    // 查询当前用户的好友列表信息
    getUserFList(){
        let _this = this;
        API.getF(this.userData.userID)
        .then(function(res){
            if(res.code==200){
                for(var i in res.data){
                    res.data[i].notSaveCount = 0; // 未读信息默认开始时0条
                }
                _this.fList = res.data;
            }
        });
    },
    // 按钮选中效果切换
    changeBtnState(type){
        if(type == "list"){// 切换的是好友列表
            this.btnState = {
                msg1:true,
                msg2:false,
                list1:false,
                list2:true
            }
        }else if(type == "msg"){ // 切换的实时信息
            this.btnState = {
                msg1:false,
                msg2:true,
                list1:true,
                list2:false
            }
        }
    },
    // 当点击fDiv触发-切换样式生成阴影
    clickFDiv(e){

        var arr = document.getElementsByClassName("fDiv");
        // // console.dir(arr);
        for(var i=0;i<arr.length;i++){
            arr[i].className = "fDiv";
        }
        
        if(e.target.parentElement.parentElement.parentElement.className == "fDiv"){
            e.target.parentElement.parentElement.parentElement.className = "fDiv model_fdiv";
        }
        
    },
    // 退出
    outLogin(){
        this.nowWebSocket.close();
        this.$router.push("/"); // 退出到登录页面
    },
    // 关闭添加好友弹窗
    addFDialogHandleClose(){
        this.addFData.nickName = null;
        this.addFDialog = false;
    },
    // 查询好友
    searchF(){
        let _this = this;
        API.getFList({"userID":this.userData.userID,"nickName":this.addFData.nickName})
        .then(function(res){
            if(res.code==200){
                _this.searchFList = res.data;
            }
            
        })
    },
    // 添加好友操作
    rowAdd(data){
        var _this = this;

         this.$confirm('确定要添加该好友吗？', '添加提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            
            // // console.dir(data);
            var saveData = {
                userID:this.userData.userID,
                fedUserID:data.userID,
                fedNickName:data.nickName,
                fedRealName:data.realName
            };

            API.addF(saveData)
            .then(function(res){
                if(res.code == 200){
                    _this.getUserFList();
                    _this.addFDialogHandleClose();
                }
            });
        });
        
    },
    // 发送信息
    doSendMsg(){
        this.webSocketSend(this.sendMsg);
    },
    // 判断是否添加过次好友
    checkIsHaveFrends(id){
        var res = false;
        for(var i in this.fList){
            if(this.fList[i].fedUserID == id){
                res = true;
                break;
            }
        }
        return res;
    }
  }
};
</script>

<!-- CSS代码 -->
<style scoped>

/deep/ .textarea__inner{
    border:1px solid rgba(0, 0, 0, 0) !important;
}

textarea{
    border:1px solid rgba(0, 0, 0, 0) !important;
}

.testmsg{
    border:1px solid rgba(0, 0, 0, 0) !important;
}

.sion{
    font-size: 26px;
    color:gray;
    cursor: pointer;
}

#Main {
  background: linear-gradient(193deg, #e0c9b8, #5a6f7c);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.LtDiv{
    width: 65vw;
    height: 80vh;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    position: relative;
}
.userDiv{
   width: 60px;
   height: 100%;
   background-color: #2D3C54;
   box-sizing: border-box;
   text-align: center;
   padding-top: 20px;
   position: relative;
} 

.listDiv{
   flex:1;
   background-color: #EEECEA;
   box-sizing: border-box;
} 

.chartDiv{
   width: 750px;
   height: 100%;
   background-color: #F6F6F6;
   box-sizing: border-box;
}

.fTtile{
    height: 60px;
    width: 100%;
    float: left;
    box-sizing: border-box;
    padding: 10px 0px 0px 20px;
}
.fTitle_span{
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 5px;

}

.msgDiv{
    height: calc(100% - 260px - 60px);
    width: 100%;
    float: left;
    box-sizing: border-box;
    background-image: url("/static/ltbk.jpg");
    background-size: 100% 100%;
    filter: contrast(95%);
    padding: 20px;
    overflow: auto;
}



.sendDiv{
    height: 260px;
    width: 100%;
    background-color: white;
    float: left;
    box-sizing: border-box;
}

.icon{
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    margin-top: 10px;
    cursor: pointer;
}

.option{
    font-size: 40px;
    color:#A09C9D;
    position: absolute;
    left: 10px;
    bottom: 10px;
    cursor: pointer;
}

.addF{
    font-size: 40px;
    color:#A09C9D;
    position: absolute;
    left: 10px;
    cursor: pointer;
}

.fDiv{
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    padding: 10px;
    cursor: pointer;
}

.model_fdiv{
    background-color: rgba(0, 0, 0, 0.1);
}

.fpt{
    width: 20%;
    height: 100%;
    float: left;
} 

.fContent{
    width: 80%;
    height: 100%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ftpDiv {
    width: 60px !important;
    height: 60px !important;
}

.fName{
    font-weight: 500;
    font-size: 19px;
    letter-spacing: 2px;
}

.fTime{
    color:gray;
    float:right;
}

.fmdesc{
    display: inline-block;
    margin-top: 10px;
    color:#868686;
}

.omsg{
    float: left;
    margin-right: 10px;
}

.myomsgContent{
    width: max-content;
    height: 30px;
    border-radius: 5px;
    background-color: #BEEFDA;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    top: 28px;
    right: -45px;
}

.myomsgContent::before{
    content: "";
    display: inline-block;
    border-top: 6px solid rgba(0, 0, 0, 0);
    border-bottom: 6px solid rgba(0, 0, 0, 0);
    border-left: 6px solid #BEEFDA;
    border-right: 6px solid rgba(0, 0, 0, 0);
    position: absolute;
    right: -12px;
}

.omsgContent{
    width: max-content;
    height: 30px;
    border-radius: 5px;
    background-color: #FFF;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    top:10px;
    left:10px;
}

.omsgContent::before{
    content: "";
    display: inline-block;
    border-top: 6px solid rgba(0, 0, 0, 0);
    border-bottom: 6px solid rgba(0, 0, 0, 0);
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid white;
        position: relative;
    right: 22px;
}

.otherSendDiv{
    width: 100%;
    height: auto;
    float: left;
    margin-top:20px;
}

.mySendDiv{
    width: 100%;
    height: auto;
    float: left;
    margin-top:20px;
}

.sendTools{
    width: 100%;
    height: 40px;
    float:left;
    box-sizing: border-box;
    padding: 5px;
} 

.sendTextDiv{
    width: 100%;
    height: calc(100% - 50px - 40px);
    float:left;
} 

.sendBtnDiv{
    width: 100%;
    height: 50px;
    float:left;
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 5px;
}

.nowLoginP{
    color: #FFF;
    position: absolute;
    top: -30px;
    left: 0;
}

.emojiSpan{
    font-size: 18px;
    cursor: pointer;
}

.emojiSpan:hover{
    background-color: rgba(0, 0, 0, 0.1);
}


</style>
